<template>
	<view class="main-page">
		<u-navbar title="个人资料" :autoBack="true" placeholder ></u-navbar>
		<view class="form">
			<u--form labelPosition="left" :model="formData" labelWidth="80" :rules="rules" ref="uForm" >
				<u-form-item label="头像" prop="avator" borderBottom >
					<u-upload
						:fileList="images"
						@afterRead="afterRead"
						@delete="deletePic"
						name="file"
						:previewFullImage="true"
						:maxCount="1"
					></u-upload>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname" borderBottom >
					<u--input v-model="formData.nickname" border="none" placeholder="请输入昵称"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="mobile" borderBottom >
					<u--input v-model="formData.mobile" border="none" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="password" borderBottom >
					<u--input v-model="formData.password" border="none" placeholder="不改请留空"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="btn-item">
			<u-button class="bg-linear-main" type="primary" shape="circle" text="确定" @tap="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import { updateProfile } from '@/common/api.js'
	import upload from '@/common/upload.js'
	import { fileUrl } from '@/common/config.js';
	
	export default {
		data() {
			return {
				images: [],
				userInfo: this.$store.state.$userInfo,
				formData: {
					id: '',
					avatar: '',
					nickname: '',
					email: '',
					mobile: '',
					password: '',
					username: '',
					group_arr: ['5'],
					status: 1
				},
				rules: {
					'nickname': {
						type: 'string',
						required: true,
						message: '请输入昵称',
						trigger: ['blur', 'change']
					},
					'mobile': [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change','blur'],
					}]
				},
			}
		},
		onLoad() {
			this.formData.avatar = this.userInfo.avatar
			this.formData.nickname = this.userInfo.nickname
			this.formData.email = this.userInfo.email
			this.formData.gender = this.userInfo.gender
			this.formData.mobile = this.userInfo.mobile
			this.formData.id = this.userInfo.id
			this.images = [{
				url: this.userInfo.avatar ? fileUrl+this.userInfo.avatar : ''
			}]
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			async afterRead(event) {
				const file = event.file
				this.images.splice(0, 1, {
					...file,
					status: 'uploading',
					message: '上传中'
				})
				console.log(event);
				const result = await upload({filePath: file.url})
				this.formData.avatar = result.file.url;
				this.images.splice(0, 1, {...file,status: 'success', message: '', url: result.file.url})
			},
			deletePic(event){
				this.images.splice(event.index, 1)
			},
			submit(){
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					const params = {...this.formData}
					// params.avatar = this.images[0]['url']
					params.username = this.formData.mobile;
					uni.showLoading()
					updateProfile(params).then(res => {
						uni.navigateTo({
							url: '/pages/user/orders'
						})
						uni.$u.toast('修改成功!')
						this.$store.commit('setUser', params)
					}).finally(() => {
						uni.hideLoading()
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form { background-color: #ffffff; padding: 0 20rpx;}
	.btn-item { padding: 30rpx; }
</style>
